<template>
  <div class="nav_m FSBC">
    <div class="nav_lf">
      <div class="nav_lf_lf FCC">伯图全景电商</div>
      <div class="nav_lf_lr">
        <ul class="F">
          <li
            class="FCC nav_lf_lr_item cursor"
            v-for="(item, index) in navList"
            :key="index"
            :class="{'nav_lf_lr_itemSel':item.isSelect}"
            @click="navClick(item)"
          >{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="nav_lr F">
      <div class="nav_lrL FAIC">
        <div class="nav_lr_name FAIC">
          <div class="nav_lr_nameT">
            <el-dropdown @command="handleClick">
              <span class="el-dropdown-link cursor">
                {{name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      name: "管理员",
      navList: [
        {
          path: "/home/shop/allOrder/list",
          route: "/home/shop",
          title: "商城管理",
          icon: "icon-sanjiaoxingcopy",
          isSelect: true,
          meta: {
            permission: ["01-01"]
          }
        },
        {
          path: "/home/system/role/list",
          route: "/home/system",
          title: "系统管理",
          icon: "icon-sanjiaoxingcopy",
          isSelect: false,
          meta: {
            permission: ["01-01"]
          }
        },

        {
          path: "/home/menber/menber/list",
          route: "/home/menber",
          title: "会员管理",
          icon: "icon-sanjiaoxingcopy",
          isSelect: false,
          meta: {
            permission: ["01-01"]
          }
        },
        {
          path: "/home/operation/operation/list",
          route: "/home/operation",
          title: "运营管理",
          icon: "icon-sanjiaoxingcopy",
          isSelect: false,
          meta: {
            permission: ["01-01"]
          }
        }
      ]
    };
  },
  filters: {},
  created: function() {
    this.routeFun();
  },
  watch: {
    $route: "routeFun"
  },
  methods: {
    /* 导航切换  start */
    navClick(item) {
      this.$emit("selectPath", item.path);
    },
    /* 导航切换  end */

    /* 监视 router处理  start */
    routeFun() {
      let path = this.$route.path;
      this.navList.forEach(e => {
        e.isSelect = false;
        if (path.indexOf(e.route) > -1) {
          e.isSelect = true;
        }
      });
    },
    /* 监视 router处理  end */

    /* 用户相关操作  start */
    handleClick(command) {
      let self = this;
      if (command == "退出登录") {
        this.quitClick();
      }
    },
    quitClick() {
      this.$confirm("是否要退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.logFun();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    async logFun(id) {
      let self = this;
      self.basePushFun("/login");
    }
    /* 用户相关操作  end */
  }
};
</script>
<style scoped>
.el-dropdown-link {
  font-size: 14px;
  color: #fff;
}

.nav_lr_name {
  margin-left: 12px;
  margin-right: 50px;
  height: 100%;
}

.nav_lrLine_box {
  width: 1px;
  height: 25px;
  border-radius: 1px;
  opacity: 0.1;
}

.nav_lr {
  width: 250px;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.nav_lf_lr {
  width: calc(100% - 300px);
  height: 100%;
  overflow: hidden;
  
}
.nav_lf_lr_item {
  width: 64px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  height: 60px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
}
.nav_lf_lr_itemSel::after {
  position: absolute;
  bottom: 0;
  left: 12px;
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  content: "";
}

.nav_lf_lf {
  width: 200px;
  height: 100%;
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.nav_lf_lf span {
font-size:24px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,255,255,1);
}
.nav_lf {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  width: calc(100% - 200px);
  overflow: hidden;
}

.nav_m {
  width: 100%;
  height: 100%;
  background-color: #eb4426;
}
</style>
